﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
          jQuery Mobile 例子
        </title>
        
        
        <link href="../Content/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />


        <link rel="stylesheet" href="my.css" />
        <style>
            /* App custom styles */
        </style>


        <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="../Scripts/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

        
        <script src="my.js">
        </script>
    </head>
    <body>

        <!-- data-role = page  用于定义  一个页面.  -->
        <div data-role="page" id="divMain">
            
            

            <!--  data-role = header  用于定义一个 顶部标题.  data-theme = a  为 画面样式的定义  -->
            <div id="divHeader" data-theme="a" data-role="header">
                <h3>
                    jQuery Mobile 例子
                </h3>
            </div>



            <!--  data-role = content  用于定义一个 中间内容区域.  -->
            <div data-role="content">



                <!--   ul    data-role= listview  为画面上的列表显示.    -->
                <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
                    
                    
                    <!-- data-role= list-divider  意味着 当前行是列表中的 子标题部分 -->                    
                    <li data-role="list-divider"> 页面处理 </li>

	                <li><a href="pages/SinglePage.html"> 单页面例子 </a></li>
	                <li><a href="pages/MultiPage.html"> 多页面例子 </a></li>
                    <li><a href="pages/page-links.html"> 页面迁移例子 </a></li>
                    <li><a href="pages/page-transitions.html"> 页面迁移效果 </a></li>
                    <li><a href="pages/loader.html"> 页面加载效果 </a></li>




                    <li data-role="list-divider"> 工具栏 </li>
                    <li><a href="toolbars/headers.html"> Header </a></li>
	                <li><a href="toolbars/footers.html"> Footer </a></li>
	                <li><a href="toolbars/navbar.html"> navbar </a></li>
                    <li><a href="toolbars/footer-persist-a.html"> Footer navbar </a></li>




                    <li data-role="list-divider"> 按钮 </li>
                    <li><a href="buttons/buttons-types.html"> 按钮的基本类型 </a></li>
                    <li><a href="buttons/buttons-icons.html"> 按钮的图标 </a></li>
                    <li><a href="buttons/buttons-inline.html"> buttons-inline </a></li>
                    <li><a href="buttons/buttons-grouped.html"> 按钮分组 </a></li>
                    



                    <li data-role="list-divider"> 内容 </li>
                    <li><a href="content/content-grids.html"> 内容表格 </a></li>
                    <li><a href="content/content-collapsible.html"> 可收缩的内容 </a></li>
                    <li><a href="content/content-collapsible-set.html"> 可收缩的内容集合 </a></li>



                    <li data-role="list-divider"> Form </li>
                    <li><a href="forms/textinputs.html"> Text 输入 </a></li>
                    <li><a href="forms/searchinput.html"> Search 输入 </a></li>
                    <li><a href="forms/sliderinput.html"> Slider 输入 </a></li>
                    <li><a href="forms/switchinput.html"> Switch 输入 </a></li>
                    <li><a href="forms/radioinput.html"> Radio 输入 </a></li>
                    <li><a href="forms/checkboxes.html"> CheckBox 输入 </a></li>
                    <li><a href="forms/selects.html"> Select 输入 </a></li>
                    <li><a data-ajax="false" href="forms/selects-ajax.html"> 动态加载 Select 输入 </a></li>


                    <li data-role="list-divider"> Listviews </li>
                    <li><a href="lists/lists-ul.html"> 简单 List </a></li>
                    <li><a href="lists/lists-nested.html"> 嵌套 List </a></li>
                    <li><a href="lists/lists-ol.html"> 数字编号 List </a></li>
                    <li><a href="lists/lists-split.html"> 按钮 List </a></li>
                    <li><a href="lists/lists-divider.html"> List 分组 </a></li>
                    <li><a href="lists/lists-autodividers.html"> List 自动分组 </a></li>
                    <li><a href="lists/lists-count.html"> List 计数 </a></li>
                    <li><a href="lists/lists-thumbnails.html"> List 缩略图 </a></li>
                    <li><a href="lists/lists-icons.html"> List 图标 </a></li>
                    <li><a href="lists/lists-formatting.html"> List 格式的例子 </a></li>
                    <li><a href="lists/lists-inset.html"> List inset (边框) </a></li>

                    <li><a href="lists/lists-search.html"> List 检索处理 </a></li>
                    <li><a href="lists/lists-search-inset.html"> List 检索处理 (边框) </a></li>
                    
                    <li><a href="lists/lists-search-with-dividers.html"> 查询带分组的列表 </a></li>
                    <li><a href="lists/lists-search-filtertext.html"> 查询带隐藏数据的列表 </a></li>

               
                    <li><a href="lists/lists-forms.html"> 列表配合 Form 使用的例子 </a></li>
                    <li><a href="lists/lists-collapsible.html">  可收缩的列表  </a></li>


                    <li><a data-ajax="false" href="lists/lists-ajax.html">  动态加载的列表  </a></li>
                    <li><a data-ajax="false" href="lists/lists-ajax-page.html">  动态加载+翻页的列表  </a></li>



                    <li data-role="list-divider"> 基本方法 </li>
                    <li><a data-ajax="false" href="methods/changePage.html">  $.mobile.changePage() </a></li>
                    <li><a data-ajax="false" href="methods/loadPage.html">  $.mobile.loadPage() </a></li>





                    <li data-role="list-divider"> BaiDu </li>

                    <li><a  data-ajax="false" href="baidu/map/helloworld.html"> 百度地图 HelloWorld </a></li>



                    <li data-role="list-divider"> Other </li>
                    <li><a  data-ajax="false" href="Storage/TestStorage.html"> Web存储 </a></li>
                    <li><a  data-ajax="false" href="Cache/TestCache.html"> 应用程序缓存 </a></li>
                    <li><a  data-ajax="false" href="WebWorkers/Test.html"> Web Worker </a></li>

                    <li><a  data-ajax="false" href="photo/TakePhoto.html"> 拍照 </a></li>
                    <li><a  data-ajax="false" href="photo/UploadPhoto.html"> 拍照并上传 </a></li>
                    <li><a  data-ajax="false" href="geolocation/demo.html"> 获取用户经纬度 </a></li>

                </ul>




            </div>




            <!--  data-role = footer  用于定义一个 底部标题.  -->
            <div id="divFooter" data-theme="a" data-role="footer">
                <h3>
                    Footer
                </h3>
            </div>



        </div>








        <script type="text/javascript">



        </script>

    </body>
</html>